<template>
	<view class="container">
		<view class="status-panel">
			<view class="status-item">
				<text class="label">当前状态:</text>
				<text :class="['value', loading ? 'loading' : '']">{{ statusText }}</text>
			</view>
			<view class="status-item" v-if="locationInfo.latitude">
				<text class="label">当前位置:</text>
				<text class="value">{{ locationInfo.latitude }}, {{ locationInfo.longitude }}</text>
			</view>
			<view class="status-item" v-if="addressInfo">
				<text class="label">位置描述:</text>
				<text class="value">{{ addressInfo }}</text>
			</view>
		</view>
		
		<view class="map-container">
			<map 
				v-if="locationInfo.latitude"
				class="map" 
				:latitude="locationInfo.latitude" 
				:longitude="locationInfo.longitude" 
				:markers="markers"
				:scale="16"
				show-location
			></map>
			<view v-else class="map-placeholder">
				<text>地图加载中...</text>
			</view>
		</view>
		
		<view class="button-group">
			<button class="btn" @tap="testLocation" :disabled="loading">
				{{ loading ? '获取中...' : '测试定位' }}
			</button>
			<button class="btn" @tap="testSearch" :disabled="loading || !locationInfo.latitude">
				测试附近搜索
			</button>
			<button class="btn" @tap="testGeocode" :disabled="loading || !locationInfo.latitude">
				测试逆地址解析
			</button>
		</view>
		
		<view class="log-container">
			<text class="log-title">测试日志:</text>
			<scroll-view class="log-content" scroll-y>
				<text class="log-entry" v-for="(log, index) in logs" :key="index">
					{{ log }}
				</text>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getCurrentLocation, searchNearby, reverseGeocode } from '../../utils/amap.js';

export default {
	data() {
		return {
			loading: false,
			statusText: '等待测试',
			locationInfo: {
				latitude: 0,
				longitude: 0
			},
			addressInfo: '',
			markers: [],
			logs: []
		}
	},
	methods: {
		// 添加日志
		addLog(message) {
			const timestamp = new Date().toLocaleTimeString();
			this.logs.unshift(`[${timestamp}] ${message}`);
		},
		
		// 测试定位
		testLocation() {
			this.loading = true;
			this.statusText = '获取位置中...';
			this.addLog('开始获取位置...');
			
			// 尝试原生定位API
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.addLog(`原生定位成功: ${JSON.stringify(res)}`);
					this.locationInfo = {
						latitude: res.latitude,
						longitude: res.longitude
					};
					this.updateMarker();
					this.statusText = '定位成功';
				},
				fail: (err) => {
					this.addLog(`原生定位失败: ${JSON.stringify(err)}`);
					this.statusText = '原生定位失败，尝试高德封装...';
					
					// 尝试高德封装的定位方法
					getCurrentLocation()
						.then(res => {
							this.addLog(`高德定位成功: ${JSON.stringify(res)}`);
							this.locationInfo = {
								latitude: res.latitude,
								longitude: res.longitude
							};
							this.updateMarker();
							this.statusText = '定位成功 (高德API)';
						})
						.catch(err => {
							this.addLog(`高德定位失败: ${JSON.stringify(err)}`);
							this.statusText = '定位失败';
						})
						.finally(() => {
							this.loading = false;
						});
				},
				complete: () => {
					if (!this.loading) {
						this.loading = false;
					}
				}
			});
		},
		
		// 更新地图标记
		updateMarker() {
			this.markers = [{
				id: 1,
				latitude: this.locationInfo.latitude,
				longitude: this.locationInfo.longitude,
				title: '当前位置',
				iconPath: '/static/logo.png',
				width: 32,
				height: 32
			}];
		},
		
		// 测试搜索
		testSearch() {
			if (!this.locationInfo.latitude) {
				this.addLog('无法搜索：请先获取位置');
				return;
			}
			
			this.loading = true;
			this.statusText = '搜索附近POI...';
			this.addLog('开始搜索附近POI...');
			
			searchNearby({
				keywords: '餐厅',
				latitude: this.locationInfo.latitude,
				longitude: this.locationInfo.longitude,
				radius: 1000
			})
			.then(result => {
				this.addLog(`搜索成功，找到 ${result.count} 个结果`);
				this.statusText = `找到 ${result.count} 个餐厅`;
				
				// 更新地图标记
				const newMarkers = result.pois.slice(0, 5).map((poi, index) => {
					return {
						id: index + 2, // id从2开始，1已用于当前位置
						latitude: poi.latitude,
						longitude: poi.longitude,
						title: poi.name,
						iconPath: '/static/location.png',
						width: 24,
						height: 24,
						callout: {
							content: poi.name,
							color: '#333333',
							fontSize: 12,
							borderRadius: 4,
							padding: 8,
							display: 'ALWAYS'
						}
					};
				});
				
				this.markers = [this.markers[0], ...newMarkers]; // 保留当前位置标记
			})
			.catch(err => {
				this.addLog(`搜索失败: ${JSON.stringify(err)}`);
				this.statusText = '搜索失败';
			})
			.finally(() => {
				this.loading = false;
			});
		},
		
		// 测试逆地址解析
		testGeocode() {
			if (!this.locationInfo.latitude) {
				this.addLog('无法解析地址：请先获取位置');
				return;
			}
			
			this.loading = true;
			this.statusText = '解析地址中...';
			this.addLog('开始逆地址解析...');
			
			reverseGeocode({
				latitude: this.locationInfo.latitude,
				longitude: this.locationInfo.longitude
			})
			.then(result => {
				this.addLog(`地址解析成功: ${result.address}`);
				this.addressInfo = result.address;
				this.statusText = '地址解析成功';
			})
			.catch(err => {
				this.addLog(`地址解析失败: ${JSON.stringify(err)}`);
				this.statusText = '地址解析失败';
			})
			.finally(() => {
				this.loading = false;
			});
		}
	}
}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 30rpx;
	box-sizing: border-box;
}

.status-panel {
	background-color: #f8f8f8;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.status-item {
	display: flex;
	margin-bottom: 10rpx;
}

.label {
	font-size: 28rpx;
	color: #666;
	width: 170rpx;
}

.value {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.loading {
	color: #1296db;
}

.map-container {
	width: 100%;
	height: 500rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	overflow: hidden;
}

.map {
	width: 100%;
	height: 100%;
}

.map-placeholder {
	width: 100%;
	height: 100%;
	background-color: #f1f1f1;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #999;
	font-size: 28rpx;
}

.button-group {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.btn {
	flex: 1;
	margin: 0 10rpx;
	font-size: 28rpx;
	line-height: 2;
	background-color: #1296db;
	color: #ffffff;
}

.log-container {
	flex: 1;
	background-color: #f8f8f8;
	border-radius: 12rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
}

.log-title {
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.log-content {
	flex: 1;
}

.log-entry {
	font-size: 24rpx;
	color: #333;
	line-height: 1.5;
	border-bottom: 1rpx solid #eee;
	padding: 10rpx 0;
}
</style> 